<template>
	<view class="msg-context">
		<NavBar title="消息中心" />
		<view class="section">
			<block v-for="(item, index) in boardList" :key="item.url">
				<view class="item" @click="clickHandle(index)">
					<view class="left">
						<image :src="item.url" class="item-img" mode="scaleToFill" />
						<view class="text">{{ item.text }}</view>
					</view>
					<image src="http://recommender.starsky.fun/tpl/Public/xsm/img/arrow_right_grey.png"
						class="right-img" mode="scaleToFill" />
				</view>
			</block>
		</view>
		<message-list :messageList="messageData" :type="type"></message-list>
	</view>
</template>

<script setup>
	import NavBar from '../../../components/nav-bar'
	import MessageList from './message-list.vue'
	import {messageData} from '../../../data/messageData.js'
	import {ref} from 'vue'
	const boardList = [{
			url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/system_message.png',
			text: '系统消息'
		},
		{
			url: 'http://recommender.starsky.fun/tpl/Public/xsm/img/admin_message.png',
			text: '帮助中心'
		}
	]
	const noticeList = ref([])
	const type = ref('all')
	const clickHandle = (index) => {
		if(index === 0){
			type.value = 'message'
		}else if(index === 1){
			type.value = 'help'
		}
	}
</script>

<style lang="scss" scoped>
	.msg-context {
		background-color: #f0f0f0;
		height: 100vh;
	}

	.section {
		height: 190rpx;
		background-color: #fff;

		.item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 94rpx;
			padding: 0 20rpx;
			border-bottom: 2rpx #f0f0f0 solid;

			.left {
				display: flex;
				align-items: center;
				font-size: 30rpx;
				font-weight: 600;

				.item-img {
					width: 64rpx;
					height: 64rpx;
					margin-right: 8rpx;
				}
			}

			.right-img {
				width: 44rpx;
				height: 44rpx;
			}
		}
	}
</style>